<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>数据库文档</title>
    <link rel="shortcut icon" th:href="@{img/database.png}">
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <!--element-ui-npm引入-->
    <!--    <script th:src="@{ele/node_modules/element-ui/lib/index.js}"></script>-->
    <!--    <link rel="stylesheet" th:href="@{ele/node_modules/element-ui/lib/theme-chalk/index.css}">-->
    <!--    <link rel="stylesheet" th:href="@{ele/node_modules/element-ui/lib/theme-chalk/fonts/element-icons.ttf}">-->
    <script th:src="@{axios/node_modules/axios/dist/axios.js}"></script>
    <!--自定义样式/样式覆盖-->
    <!--<link rel="stylesheet" th:href="@{css/index.css}">-->

</head>
<body>

<el-container id="tables">

    <div style="position: fixed;z-index: 1010;margin-left: 55px;margin-top: 10px;width: 20%">
        <strong v-if="dbTableDocument.dbInfoVo">数据库名称：{{dbTableDocument.dbInfoVo.dbName}} <br/> 版本号：{{dbTableDocument.dbInfoVo.version}}</strong>


        <el-button style="margin-left: 10px" type="primary" size="small" @click="exportDocument">下载文档</el-button>
        <!--<el-button style="margin-left: 10px" type="primary" size="small">下载文档</el-button>-->
    </div>

    <!--文档模式-->
    <el-container v-loading="loadingModel" element-loading-text="等一下，正在加载了~">

        <el-main>
            <el-card class="box-card" style="width: 20%;overflow: auto;height: 85%;position: fixed;z-index: 1000;top: 12%;"
                     shadow="always">
                <div v-for="item in dbTableDocument.dbTableInfoVoList">
                    <el-link :href="'#'+item.tableName" type="primary" style="font-size: 16px;padding: 5px">{{item.tableName}}</el-link>
                    <!--<a :href="'#'+item.tableName" style="font-size: 12px">{{item.tableName}}</a>-->
                </div>
            </el-card>

            <el-row :gutter="20" v-for="(item,index) in dbTableDocument.dbTableInfoVoList">
                <el-col :span="17" :offset="7">

                    <strong :id="item.tableName">{{item.tableName}} {{item.tableComment}}</strong>

                    <el-table :data="item.dbTableStructureVoList" stripe>

                        <el-table-column property="columnName" label="字段" width="200">
                            <template slot-scope="scope">
                                <span style="display: flex;align-items: center">
                                    <span>{{ scope.row.columnName  }}</span>
                                        <el-image v-if="scope.row.columnName==item.primaryKey"
                                                  style="width: 28px; height: 28px"
                                                  th:src="@{img/pk.png}"></el-image>
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column property="columnType" label="类型" width="200"></el-table-column>
                        <el-table-column property="isNullable" label="是否可为空" width="100"></el-table-column>
                        <el-table-column property="columnDefault" label="默认值" width="100"></el-table-column>
                        <el-table-column property="columnComment" label="备注" width="180"></el-table-column>
                    </el-table>

                    <br>
                </el-col>

            </el-row>
        </el-main>
    </el-container>

</el-container>

</body>

<script type="text/javascript">

    var app  = new Vue({
        el:'#tables',
        data:{
            loadingModel:true,
            dbTableDocument:[]
        },
        methods:{
            //获取数据库表信息
            getDbTableDocument(){
                axios.get('/dbInfo/getDataSoreceTableInfo').then((res)=>{
                    this.dbTableDocument = res.data;
                    this.loadingModel = false;
                })
            },
            fake_click(obj) {
                var ev = document.createEvent("MouseEvents");
                ev.initMouseEvent(
                    "click", true, false, window, 0, 0, 0, 0, 0
                    , false, false, false, false, 0, null
                );
                obj.dispatchEvent(ev);
            },
            export_raw(name, data) {
                var urlObject = window.URL || window.webkitURL || window;
                var export_blob = new Blob([data]);
                var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
                save_link.href = urlObject.createObjectURL(export_blob);
                save_link.download = name;
                this.fake_click(save_link);

            },
            exportDocument(){

                this.loadingModel = false;

                var test = "<!DOCTYPE html>";
                test+="<html lang='en'>";
                test+="<head>";
                test+="<meta charSet='UTF-8'>";
                test+="<title>数据库文档</title>";
                test+="<link rel=\"stylesheet\" href=\"https://unpkg.com/element-ui/lib/theme-chalk/index.css\">"
                test+="</head>";
                test+="<body>";
                test+= app.$el.innerHTML;
                /*test+= document.body.innerHTML;*/
                test+="</body>";
                test+="</html>";
                this.export_raw('数据库文档.html', test);

            }
        },
        mounted:function (){
            this.getDbTableDocument();
        }
    })

</script>
</html>